//= 添加挂件－挂件中心
.wgtcenter {
  h2 {
    @include font(13px $g0, size color);
    @include text(false, $indent: 5px);

    margin-bottom: 2px;
  }

  .side-bx {
    top: -1px;

    a {
      @include padding(1px top bottom);
    }
  }

  .notice {
    margin-right: 15px;

    @include position;

    *zoom: 1;
  }

  .close {
    float: right;
    color: #3367ac;

    @include position(absolute, right, 10px);
    @include hover(none);
  }
}

//= 添加挂件－挂件内容区
.wgtcontent {
  padding: 0 10px 0 0;
  overflow: auto;
  font-family: Verdana, sans-serif;

  .head-title {
    padding-left: 0;
  }

  .num {
    margin-left: 5px;
    font-size: 12px;
  }

  h3 {
    padding-bottom: 7px;
    font-size: 14px;
    border-bottom: 1px solid #e8e8e8;
  }
}

//= 挂件列表项区
.commenwgt {
  font-family: Verdana, sans-serif;

  li {
    padding: 5px 3px;
    border-bottom: 1px solid #d8dfef;

    h2 {
      @include rect($margin: 6px bottom);
      @include font(12px normal, size weight);

      color: #3367ac;

      @include text-overflow(100%, 18px, true);

      text-indent: 0;
    }

    .desc {
      $lines: 18px;

      padding: 0;
      margin: 3px 0;
      overflow: hidden;
      clear: both;
      color: $g9;

      @include height($lines * 2, $lines);

      .inner {
        float: left;
        width: 376px;
        height: auto;
        min-height: $lines;
      }
    }

    .more {
      float: right;
      width: 28px;
      margin-top: 18px;
      text-align: right;
    }

    .hided {
      float: right;
      padding-left: 5px;
      margin: -17px 0;
      text-align: right;
      background: $gf;
    }

    &.hover {
      padding: 5px 2px;
      background: #eaeef7;
      border-right: 1px solid #d8dfef;
      border-left: 1px solid #d8dfef;

      .hided {
        background: #eaeef7;
      }
    }

    dl {
      float: left;
      margin: 0 5px 0 0;

      $imgw: 50px;
      $padding: 5px;
      $border: 1px;
      $pb: $padding - $border;

      dt {
        position: absolute;
        top: 0;
        left: $imgw + $padding * 2 - $border;
        z-index: 2;
        display: none;
        padding: $padding + 1px;
        margin: 0;
        font-weight: 400;
        background-color: #eaeef7;
        border: 1px solid #d8dfef;

        q,
        i,
        b {
          display: block;
        }

        q {
          padding-bottom: 5px;
          color: #3367ac;
        }

        .close {
          position: absolute;
          top: 3px;
          right: 6px;
          float: right;
          font: 12px simsun, serif;
          cursor: pointer;
        }

        img {
          @include img-size(300px);
          @include border($gd);

          display: block;
        }
      }

      dd {
        padding: $padding;
        margin: 0;

        img {
          @include img-size($imgw, true, max, $hack: _);
          @include box-shadow(0 0 2px rgba(100, 100, 100, 0.3));

          display: block;
        }
      }

      &.hover {
        position: relative;

        @include box-shadow(0 1px 3px $gd);

        dt {
          display: block;

          @include box-shadow(0 2px 3px $gd);
        }

        dd {
          position: relative;
          z-index: 3;
          padding: $pb $padding $pb $pb;
          background-color: #eaeef7;
          border: $border solid #d8dfef;
          border-right: 0 none;
        }
      }
    }

    .fl {
      width: 404px;
    }

    .fr {
      @include box(100px);

      text-align: center;
    }

    button {
      margin-top: 22px;
    }
  }
}

//= 可视化编辑上状态条
.toolbar {
  @include position(relative, $t: -1px, $z: 400);

  padding: 4px;
  overflow: hidden;
  line-height: 26px;
  background: $e9 url(images/#{$main-repeat-bg}) repeat-x 0 -1156px;

  .tbbtn {
    @include rect($display: block, $float: left, $margin: 0 4px, $padding: 0 10px);
    @include height(22px);
    @include border-radius(5px);
    @include font(bold $g0, weight color);

    span {
      display: block;

      @include border-radius(5px);
    }

    &:hover,
    &:active {
      text-decoration: none;
      background-color: $gf;

      @include border-radius(5px);
    }
  }

  .layout {
    padding-left: 22px;
    background: url(images/layout.png) no-repeat 4px 50%;
  }

  .view,
  .exit {
    border: 1px $g6 solid;

    span {
      padding-right: 2px;
      padding-left: 2px;
    }
  }

  .save {
    padding-right: 0;
    padding-left: 0;
    border: 1px #1f558f solid;

    span {
      padding-right: 25px;
      padding-left: 25px;
      line-height: 20px;
      color: $gf;
      background: #458bd9;
      border: 1px #5197dd solid;
    }

    &:hover span {
      background-color: #5db3ff;
      border-color: #86d9ff;
    }
  }
}

div.wgtconfig .tableform {
  background: #f4f4f4;
}

//= 安装过的应用区
.apps-wrapper {
  padding: 5px 10px;
}

//= 安装过的应用项
.app-item {
  padding: 10px 0;
  line-height: 150%;
  border-bottom: 1px dashed $gc;

  a {
    color: #4f78c0;
    text-decoration: none;
  }
}

.app-img {
  float: left;

  img {
    padding: 1px;
    background: $gf;
    border: 1px solid $gc;
  }
}

//= 应用标题/信息/描述
.app-title,
.app-info,
.app-desc {
  margin: 0 170px 0 20px;
}

.app-title {
  margin-bottom: 5px;
  clear: none;
  font-size: 12px;
  color: #4f78c0;
}

.app-opt {
  float: right;
  width: 160px;
  margin-top: 20px;
  margin-left: -160px;
  text-align: center;

  button {
    margin-bottom: 2px;
  }
}

.app-info {
  ul {
    padding: 0;
    margin: 0 0 5px;
  }

  li {
    @include inline-block;

    width: 150px;
    margin-right: 5px;
    color: #8b8b8b;
    white-space: nowrap;
  }

  .label {
    margin-right: 10px;
    color: #4b4b4b;
  }

  .notice {
    padding: 2px 5px;
    margin: 0 -5px;
    border-width: 2px;
  }

  .lnk {
    margin: 0 5px;
    color: #476abf;
  }
}

.app-desc .desc {
  color: #828282;
}

.app-install-detail {
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
  color: #ededed;
  background: #5b5b5b;
}

//= 模板管理
.vis-box {
  padding: 8px 10px;
  background: $gf;

  // margin: 2px 0 12px 0;
  border-bottom: 1px solid $ef;
}

//= 模板页面管理按钮
.btn-tempmanage {
  color: $g3;
  text-align: center;

  span i {
    padding: 0 2px 0 2px;
    background: url(images/#{$arrow-down}) no-repeat 50% 50%;
  }

  span span {
    width: 48px;
  }
}

//= 模板更多项按钮
.btn-more {
  color: $g3;
  text-align: center;

  span i {
    padding: 0 2px 0 2px;
    background: url(images/#{$arrow-down}) no-repeat 50% 50%;
  }
}

.mr10 {
  margin-right: 10px;
}

//= 当前使用的模板
.current-theme {
  // width: 350px;

  .prev {
    $max-size: 160px;
    $padding: 0;
    $border-width: 0;

    width: 180px;

    // padding: 0 20px 0 4px;

    .theme-preview {
      @include rect($max-size, true, $overflow: all, $background: $gf, $shadow: 0 0 4px $gb);

      text-align: center;
      vertical-align: middle;
    }

    b {
      @include inline-block;

      height: 100%;
      vertical-align: middle;
    }

    img {
      @include img-size($max-size, true, true, true);

      _margin-top: -1px;
    }
  }

  .info {
    // @include box(160px, all);
    // margin-left: 180px;

    li {
      line-height: 24px;
      color: $g9;

      em {
        color: $g3;
      }

      .btn {
        margin: 3px 2px;
        color: $g3;
      }
    }
  }

  .x-drop-menu {
    border-color: #dadadd;

    @include box-shadow(1px 1px 0 rgba(200, 200, 200, 0.45));

    li {
      @include hover(false, $bg: $ge);

      a {
        display: block;

        @include hover(none, $bg: $ge);
      }
    }
  }
}

//= 模板颜色区
.theme-colors {
  padding: 10px 0;

  @include rect(164px, center);

  .arr {
    @include box(10px, 24px);

    float: left;
    cursor: pointer;
    background: $ge url(images/ico_arrow0.gif) no-repeat center center;
  }

  .arr-l {
    @include border-radius(3px 0 0 3px);
  }

  .arr-r {
    @include border-radius(0 3px 3px 0);

    background-image: url(images/ico_arrow1.gif);
  }

  .colors {
    float: left;
    width: 144px;
    overflow: hidden;
  }

  li {
    @include box(22px, true);

    float: left;
    padding: 1px;
    overflow: hidden;

    &.act {
      a {
        padding: 1px;
        border-color: $g9;
      }

      i {
        width: 18px;
        height: 18px;
      }
    }
  }

  a {
    display: block;
    padding: 3px;
    text-decoration: none;
    border: 1px solid $gf;

    &:hover {
      padding: 1px;
      text-decoration: none;
      border-color: $gc;

      i {
        @include box(18px, true);
      }
    }
  }

  i {
    @include rect(14px, 14px false, $background: $f6, $display: block, $overflow: all);
  }
}

//= 模板管理下方选项卡
.switch-head {
  border-top: 1px solid $main-divider-color;
  border-bottom: 1px solid $main-border-color;

  // background-color: #e5e5e5;

  li {
    float: left;
    padding: 0 15px;
    margin-right: 10px;

    // @include box-shadow(1px 0 1px rgba(201, 201, 201, 0.8));
    // @include border-radius(5px 5px 0 0);
    font-size: 14px;
    cursor: pointer;

    // @include sliding($switch-tag-bg);
    // background: #efefef;

    em {
      // padding: 0 10px 0 0;

      // @include sliding($switch-tag-bg, $offsetX: 100%);

      display: block;
      font-weight: 500;

      @include height(42px);
    }

    &.act {
      position: relative;
      top: 1px;
      z-index: 1;
      border-bottom: 2px solid $main-color;

      // margin-bottom: -1px;
      // @include sliding($tag-bg-on, $pos: true);
      // background: #ffffff;
    }
  }
}

//= 模板管理下方内容区
.switch-content {
  padding: 20px 0;

  .item {
    float: left;
    width: 220px;
    margin-bottom: 10px;
    text-align: center;

    .prev {
      $max-size: 160px;
      $padding: 1px;
      $border-width: 1px;

      @include rect($max-size + $padding * 2 + $border-width * 2, center, 0 10px);

      .theme-preview {
        @include rect($max-size, true, $padding, $overflow: all, $border: default, $background: $gf, $shadow: 0 0 2px $gc);

        text-align: center;
        vertical-align: middle;

        &:hover {
          @include box-shadow(0 0 5px $gb);
        }
      }

      b {
        @include inline-block;

        height: 100%;
        vertical-align: middle;
      }

      img {
        @include img-size($max-size, true, true, true);

        _margin-top: -1px;
      }
    }

    .relative {
      position: relative;
      _height: 164px;
    }

    .info {
      margin: 0 auto;
      background: $g3;

      @include box(164px, 0, all);
      @include position(absolute, lb);

      li {
        line-height: 22px;
        color: $gf;
        text-align: center;
      }

      i {
        color: $g9;
      }
    }

    .action {
      @include rect(164px, center);
    }

    .x-drop-menu {
      border-color: #dadadd;

      @include box-shadow(1px 1px 0 rgba(200, 200, 200, 0.45));

      li {
        text-align: left;

        @include hover(false, $bg: $ge);

        a {
          display: block;

          @include hover(none, $bg: $ge);
        }
      }
    }
  }

  .theme-colors {
    padding: 5px 0 0 0;
  }
}

//= 模板使用按钮
.btn-green {
  background-color: #03a319;
  border-color: #03a319;
  color: $gf;

  &:hover,
  &:focus {
    background-color: #03a319;
    color: $gf;
  }
}

//= 系统对话框补充
.dialog {
  .dialog-confirm .content {
    text-align: center;

    @include height(60px);
  }

  .action {
    padding: 10px 0 0;
    text-align: center;
  }
}

//= 可视化编辑/页面编辑公共头部
.widget-edit-head {
  .tab-head {
    // @include sliding($widget-head-bg);
    // background-repeat: repeat-x;
    background: #31495f;
  }

  .exit {
    padding: 5px 8px 0 0;

    button {
      // color: $gf;

      @include box-shadow(none);

      span {
        // @include sliding($button-bg-dark);
        background: #efefef;

        @include border-radius(3px);
      }
    }
  }

  h3 {
    float: left;
    width: 100px;
    font-size: 14px;
    font-weight: 500;
    line-height: 36px;
    color: $gf;
    text-align: center;
  }

  ul {
    float: left;
    margin-top: 4px;
  }

  li {
    float: left;
    margin: 0 2px;

    a {
      display: block;
      float: left;
      padding-right: 20px;
      padding-left: 20px;
      color: $gc;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;

      // padding: 0 0 0 20px;
      // color: $gd;
      @include height(36px);

      // em {
      //   padding: 5px 20px 0 0;
      //   display: block;
      //   @include height(26px);
      //   float: left;
      // }

      .arr {
        @include inline-block;

        width: 7px;
        height: 7px;
        margin: 5px 0 0 3px;
        overflow: hidden;
        font-size: 0;
        background: url(images/arrow-right-white.gif) no-repeat center;
      }

      &.act,
      &:hover,
      &.droping {
        // @include sliding($widget-head-tag);
        text-decoration: none;
        background: #efefef;

        em {
          // @include sliding($widget-head-tag, $offsetX: 100%);
          color: $g3;
          background: transparent;
        }
      }

      &.act {
        background: $gf;

        .arr {
          background-image: url(images/#{$arrow-right});
        }
      }

      &:hover,
      &.droping {
        .arr {
          background-image: url(images/#{$arrow-down});
        }
      }
    }
  }

  .x-drop-menu {
    width: 275px;
    padding: 0;
    overflow: auto;
    background: #e8e8e8;
    border-color: #6c7274;

    @include border-top(0);
    @include box-shadow(3px 3px 3px rgba(100, 100, 100, 0.25));

    .odd {
      background: $fc;
    }

    dl {
      padding: 3px 3px 3px 6px;
      margin: 0;
      overflow: hidden;
      white-space: nowrap;
    }

    dt {
      float: left;
      width: 90px;
      overflow: hidden;
      text-align: right;
    }

    dd {
      float: left;

      a {
        display: block;
        line-height: 20px;
      }
    }
  }
}

//= 灰色底区域
.box-gray {
  padding: 6px 10px;
  background: #e8e8e8;
}

//= 挂件编辑列表
.widget-edit-list {
  padding: 5px;

  .gridlist {
    th {
      height: 30px;
      background: #eaeef7;
    }

    td {
      padding: 12px 2px;
      vertical-align: middle;
      border: 0 none;

      i {
        color: $g9;
      }
    }

    .gray-tr {
      background: #f5f5f5;
    }

    .title {
      text-align: left;
    }
  }
}

//= 页面编辑列表
.page-edit-list {
  padding: 6px;

  .gridlist {
    th {
      height: 30px;
      background: #eaeef7;
    }

    td {
      height: 25px;
      border-width: 0;

      i {
        color: $g9;
      }

      img {
        vertical-align: middle;
      }
    }

    .v-t {
      padding-right: 30px;
      text-align: right;
      vertical-align: top;
    }

    .gray {
      color: $gc;
    }

    .odd {
      background: $f0;
    }

    .title {
      text-align: left;
    }

    .brdr {
      border-right-width: 1px;
    }

    .brdb {
      border-bottom-width: 0;
    }
  }

  .def {
    padding-left: 5px;
    color: green;
  }
}

//= 源文件编辑
.source-edit-list {
  height: auto;
  background: #eaeef7;

  .span-1,
  .span-2,
  .span-5 {
    background: #eaeef7;

    @include height(30px);
    @include border(1px solid #C8D6DC, top right);
  }
}

//= 主题列表
.theme-list {
  @include rect(140px 118px, 100%, $float: left, $background: $gf, $overflow: auto, $position: absolute lt);

  li {
    line-height: 28px;
  }

  a {
    display: block;
    padding-left: 10px;

    &:hover {
      background-color: $f6;
    }

    &.act {
      @include background(url(images/#{$side-current-bg}) repeat-x 0 -1200px);

      color: $side-current-text-color;
    }
  }
}

//= 主题配置项区
.theme-content {
  padding: 5px;
  margin-left: 140px;

  td {
    line-height: 38px;
  }

  th {
    text-align: right;
  }
}

//= 挂件源码编辑区
.table-widgets textarea {
  border: 1px solid $gb;
}

//= 插入挂件样例
.area-widgets {
  line-height: 25px;
  background: $ge;

  .icon-add {
    @include rect(15px, true, $background: url(images/plus.gif) no-repeat, $display: inb);

    vertical-align: middle;
  }

  .lnk {
    display: block;
    padding: 3px 10px;

    @if fix(ie7) {
      *zoom: 1;
    }

    @include hover(none);
  }

  .act {
    @include rect($background: $gf, $border: $gb, $padding: 2px 9px 4px, $margin: (-1px) bottom, $position: relative z-index 2);
    @include border-bottom(0);
  }

  .content {
    @include inline-block;
  }

  .list {
    @include rect(560px, $position: absolute, $border: $gb, $background: $gf, $shadow: 2px 2px 2px $gd);

    li {
      @include rect(62px, $padding: 4px, $float: left);
    }

    img {
      @include box(60px, true);
    }

    i {
      display: block;

      @include text-overflow;
    }
  }
}

//= 添加挂件实例
.add-instance {
  td {
    height: 35px;
  }

  input[type=text] {
    @include height(22px);
  }
}

//= 挂件配置
.wgtconfig {
  //li{float:left;width:125px;}

  .x-input {
    width: 150px;
    vertical-align: middle;
  }

  .x-select {
    width: 160px;
  }

  .object-select-tip {
    margin: 0 0 0 10px;
  }

  input[type=checkbox],
  input[type=radio] {
    vertical-align: middle;
  }
}

//= 源文件编辑区域
#theme_directory_body {
  color: $g4;

  li {
    padding: 3px 0;
    white-space: nowrap;
  }

  .odd {
    @include background($f0);
  }

  .span-5 {
    padding: 0 3px;
    margin: 0;
  }

  .span-1,
  .span-2 {
    padding: 0 3px;
    margin: 0;
    text-align: center;
  }

  .name {
    display: block;
    padding-left: 15px;

    img {
      margin-right: 10px;
    }
  }
}

$price: $f30;
$border: #e8e8e8;
$active: #eaeef7;
$bg: #f7f7f7;
$afc: #486cb7;
$fg: $g9;

//= 精确选择商品挂件区
.select-product {
  padding: 10px 0;
  overflow: hidden;

  /* .search-product{overflow:hidden;} */

  .search-item {
    float: left;
    height: 22px;
    margin-bottom: 8px;
  }

  .search-keyword {
    width: 100%;

    @include border-radius(3px);

    .search-ipt {
      float: left;
      width: 200px;
      text-align: left;
      outline: none;

      @include height(20px);
    }

    .search-btn {
      float: left;
      width: 40px;
      height: 22px;
      margin-left: -3px;
      color: $gf;
      text-indent: -1000px;
      cursor: pointer;
      background: url(images/search.png) no-repeat center center;

      @include border-radius(3px);
    }
  }

  .search-tip {
    float: left;
    width: 70px;
    line-height: 180%;
    color: $fg;
  }

  .select-obj {
    @include box-shadow(2px 2px 2px $gd inset);
    @include border-radius(3px);

    position: relative;
    z-index: 2;
    text-indent: 5px;
    border: 1px solid $gc;

    @include height(18px);

    .search-key {
      float: left;
    }

    .icon {
      float: right;
      width: 18px;

      b {
        @include inline-block(middle);

        margin: 4px 2px 0 0;
        font-size: 0;
        line-height: 0;
        border-color: $g0 transparent transparent;
        border-style: solid dashed dashed;
        border-width: 4px;
      }
    }
  }

  .search-type {
    width: 60px;
  }

  .search-list {
    width: 100px;
    margin-left: 5px;

    .search-pop {
      width: 85px;
    }
  }

  .search-sub-cat {
    text-indent: 15px;
  }

  .search-pop {
    position: absolute;
    top: 18px;
    left: 0;
    display: none;
    width: 45px;
    max-height: 280px;
    overflow-y: auto;
    color: $afc;
    background: $gf;
    border: 1px solid $afc;

    .active {
      color: $afc;
      background: $active;
      border: 0 none;
    }

    a {
      display: block;
      width: 100%;

      @include hover(none, $bg: $active);
    }
  }

  .select-content,
  .selected-content {
    float: left;
    width: 345px;

    .product-body {
      height: 330px;
      border: 1px solid $border;

      .add-opt,
      .edit-opt,
      .product-edit {
        display: none;
      }
    }
  }

  .select-content .product-added .add-opt,
  .product-price {
    display: block;
  }

  .select-opt {
    float: left;
    width: 75px;
    _width: 70px;
    height: 330px;
    text-align: center;

    .add-product,
    .remove-product {
      height: 24px;
      text-indent: -999em;
      cursor: pointer;
      background: url(images/add-btn.gif) no-repeat center 33%;
    }

    .add-product {
      margin-bottom: 10px;
      background-position: center bottom;
    }

    .add-product-current {
      background-position: center 66%;
    }

    .remove-product-current {
      background-position: center top;
    }

    .opt-btn {
      margin-top: 120px;
    }
  }

  .selected-content {
    .product-body {
      _position: absolute;
      _width: 100%;
      overflow-y: auto;

      .edit-opt {
        display: block;
        float: right;
      }

      li .product-title {
        width: 100%;
        height: 20px;
        overflow: hidden;
      }
    }

    .num {
      padding: 0 5px;
      color: $price;
    }
  }

  .selected-tip {
    float: right;
    margin: 8px 0 0;
    color: $fg;
    text-align: right;
  }

  .sel-opt {
    float: left;
    margin-top: 8px;
    overflow: hidden;

    label {
      float: left;
      height: 22px;
      line-height: 22px;
    }

    .other {
      margin-left: 20px;
    }

    .sel {
      float: left;
      margin: 4px;

      @include border-radius(1px);
    }
  }

  .pager {
    float: right;
    height: 22px;
    margin-top: 8px;
    clear: right;
    line-height: 22px;

    .andson {
      border: 0 none;
    }
  }

  .product-body {
    background: $gf;

    li {
      padding: 5px;
      overflow: hidden;
      clear: both;
      color: $fg;
      vertical-align: top;
      cursor: pointer;
      background: none;

      &.editing {
        .product-info {
          width: 250px;
        }

        .product-btn {
          color: #3367ac;
          text-align: right;
        }

        .product-name input {
          width: 198px;
        }

        .product-pic input {
          width: 60px;
        }

        .product-pic .imageSrc {
          width: 135px;

          @extend .select-obj;
        }

        .product-price,
        .product-nice,
        .edit-opt {
          display: none;
        }

        .product-edit {
          display: block;
          height: auto;

          .edit-item {
            margin: 3px auto;
          }
        }
      }

      &.active {
        background: $active;
        border: 0 none;
      }
    }

    .up-btn,
    .down-btn {
      @include inline-block;

      width: 18px;
      height: 22px;
      margin: 0 2px;
      background: url(images/icon-arrs.gif) no-repeat 0 0;
    }

    .down-btn {
      background-position: right top;
    }

    .first .up-btn {
      background-position: left bottom;
    }

    .last .down-btn {
      background-position: right bottom;
    }

    .product-info {
      float: left;
      width: 200px;
      margin-left: 6px;

      .product-price {
        color: $price;
      }

      .product-title {
        height: 38px;
        overflow: hidden;
        line-height: 18px;
      }
    }

    .pic-info {
      float: left;
      padding: 2px;
      background: $gf;
      border: 1px solid #efefef;

      img {
        display: block;
        width: 50px;
        height: 50px;
      }
    }

    .add-opt {
      float: left;
      width: 60px;

      // @include icon-bg(success);

      .add-btn {
        float: right;
        color: #5ea34d;
      }
    }

    .edit-opt {
      .move-opt {
        margin-bottom: 3px;
      }
    }
  }
}

.layout-frame {
  background-color: lighten($main-bg-color, 2%);

  th,
  td {
    border: 1px solid $main-border-color;
  }
}
